<template>
	<page  ref='page' top='100rpx'>
		<!-- 首页 wwl-->
		<view class="page">
			<view class="tabber_box">
				<view class="tabber_box_static" :style="{ height: `${getters.statusBarHeight}px` }"></view>
				<view class="tabber_box_flex" :style="{ height: `${getters.statusBarHeight}px` }"></view>
			</view>
			<view class="tabber_box_title_static">
			</view>
			<view class="tabber_box_title_flex" :style="{ top: `${getters.statusBarHeight}px` }">
				
				<view class="text">
					社区服务
				</view>
			</view>
			
			<view class="pics">
				<scroll-view class="left" scroll-y>
					<view 
					@click="leftClickHandle(index,item.id)"
					:class="active===index?'active':''"
					v-for="(item,index) in leftMenuList" 
					:key="item.id">
					  {{item.name}}
					</view>
				</scroll-view>
				<scroll-view class="right" :style="'height: '+height+'px;'" :scroll-top="scrollTop" scroll-y="true"  @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
					<view class="tisya" >温馨提示：由于平台刚刚上线，社区服务内的产品暂时不够完善，【小区自发】代表的是业主发自己的东西上来售卖</view>
					<view class="item" v-for="(item,index) in rightContent" :key="index">
						<!-- <text class="biaoti" v-if="active == 0">{{item.cat_name}}</text> -->
						<text class="biaoti" >{{item.name}}</text>
						<!-- <view class="xiabbf" v-if="active == 0">
							<view class="item-phone" v-for="(v,i) in item.children" :key="i" 
			@click="tiaozhuang(item.cat_id,v.id,v.name)">
								<view>
									<image :src="v.iconimgurl != '' ? v.iconimgurl : zwicon"></image>
								</view>
								<view class="phone-r">
									<view>{{v.name}}</view>
								</view>
							</view>
						</view> -->
						<view class="xiabbf" >
							<view class="item-phone" v-for="(v,i) in item.classif" :key="i" @click="tiaozhuang(item.id,v.id,v.name)">
								<view>
									<image :src="v.iconimgurl != '' ? v.iconimgurl : zwicon"></image>
								</view>
								<view class="phone-r">
									<view>{{v.name}}</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
	
			<tabbar ref='tabbar' active='1' />
		</view>
	</page>
</template>
 
<script>
	 import tabbar from '@/components/tabbar.vue'
	 
	 import {
	 	getJCCGoodsNav,
	 	getJCCGoodsList,
	 	getDGGoodsList,
	 	getShopList,
	 	getbuildingMaterialsCityType,getbuildingMaterialsCitysGoodsList,getCityName,
	 	getHomeCarousel,
	 	getHometellAbout,
	 	getDesignNav,
	 	getHomeFindInspiration,
	 	getFindDesignshopList,
	 	getFindCraftsman,
	 	commonGetConfig,
		getGZGnavList,
		getTabList
	 } from '@/utils/getRequest.js'
	 
	export default {
		components: {
			tabbar
		},
		
		data() {
			return {
				//获取屏幕可使用高度
				height:uni.getSystemInfoSync().windowHeight-130,
				//左侧菜单
				leftMenuList: [],
				//选择的状态
				active: 0,
				// 右侧数据
				rightContent: [],
				//接口返回数据
				cates:[],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				//占位图
				zwicon:"https://tuzhuang-1304727035.file.myqcloud.com/images/ab65b461b1a110208a932fcfc8f0655b.png",
				//默认施工服务
				shigong:[
					// {
					// 	cat_id: 1,
					// 	cat_name: "监理",
					// 	children: [
					// 		{
					// 			id: 5,
					// 			name: "工程监理",
					// 			cat_money: 2299,
					// 			iconimgurl: "https://tuzhuang-1304727035.file.myqcloud.com/images/ab65b461b1a110208a932fcfc8f0655b.png"
					// 		 }
					// 	 ]
					// },
					// {
					// 	cat_id: 2,
					// 	cat_name: "设计",
					// 	children: [
							
					// 	]
					// }
				],
			}
		},
		onLoad () {
			
			this.getPicsCate()
			// 1、获取本地存储中的数据
			// const Cates = uni.getStorageSync('cates')
			
			// if(!Cates) {
			// 	this.getPicsCate()
			// }else{
			// 	//有旧的数据 定义过期时间
			// 	if(Date.now() - Cates.time > 1000*10) {
			// 		//重新请求
			// 		this.getPicsCate()
			// 	}else{
			// 		//可以使用旧数据
			// 		this.cates = Cates.data
			// 		let leftMenuList = this.cates.map(v=>v.cat_name)
			// 		this.leftMenuList = leftMenuList
			// 		let rightContent = this.cates[0].children
			// 		this.rightContent = rightContent
			// 	}
			// }
		},
		methods: {
			//根据ID判断跳转的页面
			tiaozhuang(cat_id,id,name){
				console.log(cat_id,'跳转商品')
				console.log(id,'跳转商品')
				console.log(name,'跳转商品')
				if(cat_id == 5 ){
					//直接跳商品详情
					// uni.navigateTo({
					// 	url:'/pagesHome/information?type=thirdPartySupervision',
						
					// })
					//跳设计师的店铺列表也
					// uni.navigateTo({
					// 	url:'/pagesCommodity/findDesign/index?id='+id
					// })
					uni.navigateTo({
						url:`/pagesCommodity/classifitopnav?build_city_nav_id=${id}&typeName=${encodeURIComponent(name)}`
					})
				// }else if(cat_id == 2 && this.active == 0){
				// 	uni.navigateTo({
				// 		url:'/pagesCommodity/findDesign/index?id='+id
						
				// 	})
				// }else if(this.active == 1){
				// 	uni.navigateTo({
				// 		url:`/pagesCommodity/classifitopnav?classify_id=${id}&typeName=${encodeURIComponent(name)}`
						
				// 	})
				}else {
					uni.navigateTo({
						url:`/pagesCommodity/classificationzgoods?zongid=${cat_id}&ziid=${id}&jiacan=1&typeName=${encodeURIComponent(name)}`
						
					})
				}
				
				
			},
			
            //默认获取数据
			async getPicsCate () {
				
				let resf = await getbuildingMaterialsCityType()
				
				// let arr2 = [{
				// 		avatar: "https://tuzhuang-1304727035.file.myqcloud.com/images/2945579173c5dc02a6bb80033e6ed480.png",
				// 		id: -1,
				// 		name: "施工服务",
				// 	},
				// 	{
				// 		avatar: "https://tuzhuang-1304727035.file.myqcloud.com/images/2945579173c5dc02a6bb80033e6ed480.png",
				// 		id: -2,
				// 		name: "基础装修",
				// 	}
				// ];
				// let arr = arr2.concat(resf)
				
				this.leftMenuList = resf;
				
				this.leftClickHandle(0,resf[0].id);
				// var res = await getDesignNav()
				// this.shigong[1]['children'] = [{
				// 	iconimgurl: 'https://tuzhuang-1304727035.file.myqcloud.com/images/7d89b4d91b8deb8ae484d97048ac58eb.png',
				// 	name: '全部',
				// 	id: 0
				// }, ...res]
				// // //第一次进来保存施工服务下的分类
				// uni.setStorageSync('sgdesingnav',this.shigong)
				
				// this.rightContent = this.shigong;
				
				
			},
			//获取基础装修数据
			async getmanPicsCate () {
				
				var res = await getGZGnavList()
				
				console.log(res,'大分类')
				// this.shigong[1]['children'] = [{
				// 	name: '全部',
				// 	id: 0
				// }, ...res]
				
				this.shigong = res;
				uni.setStorageSync('jichumannav',this.shigong)
				
				this.rightContent = this.shigong;
				
			},
			//获取建材城分类数据
			async getjccPicsCate (id) {
				var res = await getTabList({build_city_id:id})
				
				
				this.shigong = [{
						id: id,
						name: "全部",
						classif: 
							res
						 
					}];
					
				console.log(this.shigong,'大分类')
				uni.setStorageSync('jccxnav',this.shigong)
				
				this.rightContent = this.shigong;
				
			},
            //左侧菜单点击事件
			leftClickHandle (index,id) {
				console.log(index,'点击分类')
				console.log(id,'点击分类2')
				this.active = index
				// if(id == -1){
				// 	const sgdesingnav = uni.getStorageSync('sgdesingnav')
				// 	this.rightContent = sgdesingnav
				// }else if(id == -2){
				// 	this.getmanPicsCate()
				// }else{
					
					this.getjccPicsCate(id)
					
				// }
				
				
				// let rightContent = this.cates[index].children
				// this.rightContent = rightContent
				
				
				this.scrollTop = 0
			},
			// scroll(e){
			// 	console.log(e,'滚动条')
			// 	this.scrollTop = e.detail.scrollTop
			// },
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e,'滚动条')
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
            //跳转对应的id
            handleDetalis(url){
                  uni.navigateTo({
					url
				})  
            },
		}
	}
</script>
 
<style lang="scss">
scroll-view ::-webkit-scrollbar {  
	display: none !important;  
	width: 0 !important;  
	height: 0 !important;  
	-webkit-appearance: none;  
	background: transparent;  
}
page{
	overflow-y: hidden;
	height: 100%;
	background: #f1f1f1 !important;
}


	.page {
		width: 100%;
		padding-bottom: 120rpx;
		overflow: hidden;
	}

	.tabber_box .tabber_box_static {
		width: 100%;
		background-color: #fff;
	}

	.tabber_box .tabber_box_flex {
		width: 100%;
		background-color: #fff;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
	}

	.tabber_box_title_static {
		height: 80rpx;
		width: 100%;
		background-color: #fff;
	}

	.tabber_box_title_flex {
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 42rpx;
		font-family: PingFang SC, PingFang SC-Semibold;
		font-weight: 700;
		text-align: center;
		color: #000000;

		.left {
			margin-top: 4rpx;
			position: absolute;
			left: 58rpx;
			top: 50%;
			transform: translateY(-50%);

			image {
				width: 36rpx;
				height: 36rpx;
			}

			text {
				display: inline-block;
				position: absolute;
				left: 34rpx;
				top: 5px;
				width: 10rpx;
				height: 10rpx;
				background: $theme;
				border-radius: 50%;
			}
		}
	}
	
	
.pics{
	height: 100%;
	display: flex;
	// padding: 10px 10px;
	.left{
		view:first-child{
			margin-top: 0rpx !important;
		}
		width: 200rpx;
		height: 100%;
		background: #fff;
		margin-right: 12rpx;
		
		view{
			margin-top: 10rpx;
			height: 140rpx;
			line-height: 140rpx;
			color: #333;
			text-align: center;
			font-size: 32rpx;
		}
		.active{
			background:#ffebd5;
			color: #000;
			font-weight: bold;
			border-right: 5px solid #ff992b;
		}
	}
	.right{
		// height: 100%;
		width: 520rpx;
		// margin: 0rpx auto;
		
		
		
		.item{
			margin-top: 12rpx;
			background: #fff;
			padding: 5px 5px;
			.biaoti{
				display: block;
			}
			> text {
				font-size: 20rpx;
				font-weight: bold;
			}
			.xiabbf{
				flex-wrap: wrap;
				display: flex;
				flex-direction:row;
				align-items: center;
				justify-content: flex-start;
			}
			.item-phone{
				margin: 2px 4px;
				// background-color: #F8F8F8;
				border-radius: 8rpx;
				padding: 10rpx;
				display: inline-flex;
				align-items: center;
				flex-direction: column;
				flex: 0 0 ;
				
				view:first-child{
					image{
						width: 120rpx;
						height: 120rpx;
					}
				}
				.phone-r{
					// margin-left: 15rpx;
					// display: flex;
					// flex-direction: column;
					// align-items: flex-start;
					// margin-left: 7px;
					    flex: 0 0 10%;
						
					view{
						font-size: 30rpx;
						overflow: hidden;
						height: 80rpx;
						    text-overflow: ellipsis;
						    display: -webkit-box;
						    -webkit-line-clamp: 2;
						    -webkit-box-orient: vertical;
					}
					view:last-child{
						margin-top: 10rpx;
					}
				}
			}
		}
		.item:last-child{
			padding-bottom: 30rpx;
		}
	}
}

.tisya{
	background: #ff9e0c;
	    padding: 10px 10px;
	    font-size: 16px;
	    color: #fff;
}
</style>